<template>
  <div @mousemove="getMousePosition" id="appWrapper" style="width: 100vw;height: 100vh;overflow: hidden;background-color: var(--color-neutral-1);"
      :style="{
        backgroundColor:data.isDarkMode?'rgb(15,15,15)':'white'
      }"
  >
    <!-- <div v-if="localStorage.getItem('allow')==null" style="width: 100vw;height: 100vh;padding-left: 50vw;padding-top: 50vh">
      <div style="width: 100vw;max-width: 600px;padding: 20px 20px;border-radius: 10px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);transform: translate(-50%,-50%);background-color: var(--color-neutral-1);color: var(--color-neutral-10);border: 1px solid rgba(128,128,128,0.2)">
        <p style="font-size: 20px;font-weight: bold;">欢迎使用志愿助手——高考志愿智能决策系统！</p>
        <p style="font-size: 14px;margin-top: 15px;line-height: 30px"><span style="font-weight: bold">在您开始使用本系统之前，请仔细阅读以下重要信息：</span></p>
        <p style="font-size: 14px;margin-top: 15px;line-height: 30px"><span style="font-weight: bold">尊重与公正：</span>我们致力于营造一个积极、健康的交流平台。请您在发表意见时保持客观、公正，避免发表任何形式的恶评或攻击性言论。我们期待每一位用户都能以开放的心态参与讨论，共同为高考志愿的选择提供有价值的建议。</p>
        <p style="font-size: 14px;margin-top: 15px;line-height: 30px"><span style="font-weight: bold">反馈与改进：</span>本系统于3月9日刚刚完成开发，可能仍存在一些问题和不足。如果您在使用过程中发现任何问题或提出任何建议，请及时反馈给我们。我们将根据您的想法，不断优化和完善系统，为您提供更好的使用体验。</p>
        <p style="font-size: 14px;margin-top: 15px;line-height: 30px"><span style="font-weight: bold">数据准确性：</span>请注意，目前本系统仍处于展示阶段，所提供的数据可能存在一定的误差或不准确之处。请您在参考系统建议时，务必结合实际情况进行综合考虑，以确保做出最合适的志愿选择。</p>
        <p style="font-size: 14px;margin-top: 15px;line-height: 30px"><span style="font-weight: bold">设备兼容性：</span>本系统主要适用于电脑端，建议您使用电脑浏览器进行访问，或选择宽屏幕的平板电脑。为确保最佳的浏览体验，请确保您的设备满足相应的配置要求。</p>
        <p style="font-size: 14px;margin-top: 15px;line-height: 30px">感谢您的理解与支持！我们期待您在本系统中找到合适的高考志愿建议，并祝愿您未来的学业和人生道路充满光明与希望！</p>
        <div style="width: 100%;text-align: right;margin-top: 15px">
          <button @click="startok">我已知晓</button>
        </div>
      </div>
    </div> -->
    <RouterView :control-app-loading="controlAppLoading" v-if="data.showSubPage" :app-data="data" style="width: 100vw;height: 100vh;"></RouterView>
    <div v-if="data.showLoading!=2" style="width: 100vw;height: 100vh;padding-left: 50vw;padding-top: 50vh;position: fixed;left: 0;top: 0;z-index: 20000;transition: opacity .3s cubic-bezier(0.23, 1, 0.320, 1);"
      :style="{
        backgroundColor:data.theme.background,
        opacity:data.showLoading==0?1:0
      }"
    >
      <img src="./assets/logo.png" style="width: 100px;transform: translate(-50%,-50%);" />
      <div style="width: 100vw;text-align: center;position: fixed;left: 0;bottom: 25vh;padding-top: 50px;">
        <p v-if="data.showLoadingText" style="color: var(--color-neutral-10);font-size: 24px;">后端服务未启动</p>
        <div v-if="data.showLoadingAnm" style="--size: 32px; --dot-size: 4px; --dot-count: 6; --color: var(--color-neutral-10); --speed: 1s; --spread: 60deg;display: inline-block;transform: translateY(50%);" class="dots">
            <div style="--i: 0;" class="dot"></div>
            <div style="--i: 1;" class="dot"></div>
            <div style="--i: 2;" class="dot"></div>
            <div style="--i: 3;" class="dot"></div>
            <div style="--i: 4;" class="dot"></div>
            <div style="--i: 5;" class="dot"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import config from '@/config'
import axios from 'axios'
import tool from './utlis/tool'

export default{
  computed:{
    localStorage(){
      return localStorage
    }
  },
  data(){
    return{
      data:{
        showLoadingText:false,
        showLoadingAnm:false,
        showSubPage:false,
        showLoading:0,
        isMobile:undefined,
        isDarkMode:false,
        serverURL:'',
        serverWSURL:'',
        theme:{
          background:'',
          translucentBackground:''
        },
        pageSize:{
          width:0,
          height:0
        },
        mousePosition:{
          x:0,
          y:0
        }
      }
    }
  },
  created() {
    this.data.serverURL = config.serverURL
    this.data.serverWSURL = config.serverWSURL
  },
  mounted(){

    axios.get(config.serverURL.split('/api/v1')[0]).then(async res=>{
      this.data.showSubPage = true
      await tool.waitSeconds(0.5)
      this.data.showLoadingAnm = true
    }).catch(err=>{
      this.data.showLoadingAnm = false
      this.data.showLoadingText = true
    })

    this.data.isMobile = /Mobile/i.test(navigator.userAgent)
    
    //一直检测深色模式是否开启
    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
    if (!prefersDarkMode.matches) {
      //浅色模式
      this.data.theme.background = 'white'
      this.data.theme.translucentBackground = 'rgba(242,242,242,0.6)'
      this.data.isDarkMode = false
      document.body.removeAttribute('arco-theme')
    } else {
      //深色模式
      this.data.theme.background = 'rgb(15,15,15)'
      this.data.theme.translucentBackground = 'rgba(25,25,25,0.6)'
      this.data.isDarkMode = true
      document.body.setAttribute('arco-theme', 'dark')
    }

    //更新实时页面宽高
    setInterval(() => {
      this.data.pageSize.width = document.getElementById('appWrapper').clientWidth
      this.data.pageSize.height = document.getElementById('appWrapper').clientHeight
    }, 1);

    this.controlAppLoading()
  },
  methods:{
    async controlAppLoading(){
      this.data.showLoading = 1
      await tool.waitSeconds(0.3)
      this.data.showLoading = 2
    },
    startok(){
      localStorage.setItem('allow',true)
      location.reload()
    },
    getMousePosition(e){
      this.data.mousePosition.x = e.clientX
      this.data.mousePosition.y = e.clientY
    }
  },
  props:{

  },
}
</script>

<style scoped>

</style>